<template>
  <button @click="increment">
    Count: {{ count }}
  </button>
</template>
 
<script>
// Composition API 将组件属性暴露为函数，因此第一步是导入所需的函数
import { ref, computed, onMounted } from 'vue'
 
export default {
//   setup() {
// // 使用 ref 函数声明了称为 count 的响应属性，对应于Vue2中的data函数
//     const count = ref(0)
 
// // Vue2中需要在methods option中声明的函数，现在直接声明
//     function increment() {
//       count.value++
//     }
//  // 对应于Vue2中的mounted声明周期
//     onMounted(() => console.log('component mounted!'))
 
//     return {
//       count,
//       increment
//     }
//   },
  data(){
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  }
}
</script>
